寫完初步的測試之後，下一步自然就是試著優化我們的網頁外觀了。

要優化我們的外觀，當然還是要使用 Laravel 的 blade engine！讓我們一起來學學怎麼使用吧！

Blade Engine

基本上， blade engine 就是一個根據樣板生成畫面的引擎。

控制語法和輸入資料的方式，在之前的文章都提過了，今天我們來提一下從 Laravel 7 開始引入的 Component 概念

Component

基本上，component 就類似之前文章提到過的 layout 概念，不過換了一種寫法之後，可能對於一些人來說會更加直觀。

首先，我們利用 artisan 工具，協助我們建立想要的 Component

$ ./vendor/bin/sail artisan make:component Alert

 INFO  Component created successfully.

建立好了之後，我們會發現 artisan 一共幫我們建立了兩個檔案：views/components/alert.blade.php 和 app/View/Components/Alert.php

我們先來看看 alert.blade.php

<div>  
    <!-- The whole future lies in uncertainty: live immediately. - Seneca -->  
</div>

除了一段箴言註解之外，基本上就是提供了一個 <div> 區塊，讓我們可以發揮自己的想像力，撰寫元件該有的長相。

如果想在網頁畫面內，呼叫這個元件的話，可以用 x- 開頭的方式，加上元件的命名

<x-alert/>

如果元件的名稱較長，命名就要以 - 進行區隔

<x-user-profile/>

或者，如果元件的位置在 views/components/ 的資料夾內，那就要以 . 的方式命名

比方說，如果元件位於 views/components/inputs/alert.blade.php

那就要寫成

<x-inputs.alert/>

再來，我們看看 Alert.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

這邊負責為我們的元件提供資料。

比方說，我們想在 alert 元件中加上 message 欄位，就可以這樣改寫 Alert.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    /**
    * The alert message.
    *
    * @var string
    */
    public $message;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

並且這樣改寫 alert.blade.php

<div class="alert">
    {{ $message }}
</div>

這樣寫好之後，我們只需要在呼叫 alert 元件時，加上我們的資料

<x-alert message="錯誤訊息"/>

如果我們想加上來自 PHP 產生的資料，變數前面要加上 : 前綴

<x-alert :message="$message"/>

這樣一來，就可以做出一個能靈活運用，在各個頁面中都可以共用的 component 了！

除了之前介紹的樣板做法以外，新的 Component 可以讓我們用另一種想法建構前端的畫面，為畫面的設計提供一種不同的做法。

參考資料

• Components